<template>
	<view class="news">
		<!-- 分类组件 -->
		<template>
			<u-tabs :list="projects" @change="change" :current="current"></u-tabs>
		</template>
		<view class="news-three-item" v-for="list in newsList" :key="list.id" @click="toDetail(list.id)">
			<text class="title">{{list.title}}</text>
			<view class="image-list">
				<view class="image-box" v-for="img in list.img_info.imgs" :key="img.index"><image :src="img"></image></view>
			</view>
			<view class="info-box">
				<view class="info-left">
					<image :src="list.avatar"></image>
					<text>{{list.nickname}}</text>
				</view>
				<view class="info-center">
					<text>浏览量：{{list.view_num}}</text>
				</view>
				<view class="info-right">{{list.date}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				oral_project:'',
				newsList:[],
				projects: [ {
						name: '推荐',
						linkageid:''
					}, {
						name: '种植牙',
						linkageid:'6968'
					}, {
						name: '牙矫正',
						linkageid:'6812'
					}, {
						name: '烤瓷牙',
						linkageid:'6844'
					}, {
						name: '补牙',
						linkageid:'6766'
					}, {
						name: '洗牙',
						linkageid:'6767'
					}],
					current:0
			}
		},
		onLoad() {
			this.getNewsList()
		},
		onReachBottom() {
			this.page++
			this.getNewsList()
		},
		onPullDownRefresh() {
			this.page = 1
			this.newsList = []
			setTimeout(()=>{
				this.getNewsList()
				uni.stopPullDownRefresh()
			},1000)
		},
		methods: {
			async getNewsList(callback){
				const res = await this.$myRequest({
					url:'/index.php?m=app&c=home&a=news&oral_project='+this.oral_project+'&page='+this.page
				})
				this.newsList = [...this.newsList,...res.data.data.list]
				callback && callback()
			},
			change(current){
				this.oral_project = current.linkageid;
				this.newsList = []
				this.page = 1
				this.getNewsList()
			},
			toDetail(id){
				uni.navigateTo({
					url:'/pages/news-detail/news-detail?id='+id
				})
			}
		}
	}
</script>

<style>
	.news{
		background-color: #F8F8F8;
	}
	.news .news-three-item{
		margin: 8px auto;
		padding: 8px 6px;
		background-color: #FFFFFF;
	}
	.news .news-three-item .title{
		font-size: 14px;
		color: #FFA500;
	}
	.news .news-three-item .image-list{
		display: flex;
		margin: 5px auto;
	}
	.news .news-three-item .image-box{
		width: 35%;
		margin: 0 2px;
		overflow: hidden;
		height: 80px;
	}
	.image-box image{
		width: 100%;
		height: 100%;
	}
	
	.info-box{
		font-size: 12px;
		color: #989898;
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		line-height: 25px;
	}
	.info-box .info-left image{
		width: 25px;
		height: 25px;
		border-radius: 50%;
		vertical-align: middle;
	}
</style>
